<!-- src/views/home/components/WhrProgress WhrPropress.vue 2023/5/25  @wanghaoran -->
<template>
  <div class="relative">
    <div class="absolute font-size-12 above-arrow">
      <span class="absolute" :style="greenStyle"><el-icon class="whr-green"><CaretBottom/></el-icon></span>
      <span class="absolute" :style="redStyle"><el-icon class="whr-red"><CaretBottom/></el-icon></span>
    </div>
    <el-progress v-bind="$attrs" :percentage="props.percentData[0]" color="#477CFB"/>
  </div>

</template>

<script>
export default {
  inheritAttrs: false
}
</script>

<script setup>
import {CaretBottom} from "@element-plus/icons-vue";
import {reactive} from "vue";

const props = defineProps({
  percentData: {
    type: Array,
    default: function () {
      return [
        69.3, 50, 100
      ]
    }
  }
})
const greenStyle = reactive({
  left: `calc(${props.percentData[1]}% - 6px)`,
})
const redStyle = reactive({
  left: `calc(${props.percentData[2]}% - 6px)`,
})
</script>

<style scoped>
@import "../assets/css/index.css";

.whr-green {
  color: #00B696;
}

.whr-red {
  color: #FF5353;
}

.above-arrow {
  top: -10px;
  width: calc(100% - 60px);
}
</style>